<template>
	<view class="ys">
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="swiper-item">
						<image :src="item.imageUrl" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="search">
			<view class="left">
				<uni-data-select border="border: 0;" v-model="value" :localdata="range" @change="change"
					:clear="false"></uni-data-select>
			</view>
			<view class="inputbox">
				<input type="text" v-model="search">
				<i class="iconfont icon-sousuo" @click="toSearch"></i>
			</view>
		</view>
		<view class="nav">
			<view class="navitem" @longtap="personalAlert" v-if="info.status == 1 && usertype != 3 || usertype == 2">
				<view class="imgbox">
					<i class="iconfont icon-baojing1"></i>
					<text class="it">长按</text>
				</view>
				<text>一键报警</text>
			</view>
			<view class="navitem" @click="toPage('/pages/tenant/myroom')" v-if="usertype != 3">
				<view class="imgbox">
					<i class="iconfont icon-kumen-kai"></i>
				</view>
				<text>一键开锁</text>
			</view>
			<view class="navitem" @click="scanCode" v-if="usertype == 1">
				<view class="imgbox">
					<uni-icons type="scan" color="#fff" size="18"></uni-icons>
				</view>
				<text>扫一扫</text>
			</view>
			<view class="navitem" @click="toPage('/pages/userinfo/index')" v-if="usertype == 1 && show_form">
				<view class="imgbox">
					<i class="iconfont icon-fangkeguanli"></i>
				</view>
				<text>实名认证</text>
			</view>
			<view class="navitem" @click="toPage('/pages/visit/index')" v-if="usertype != 3">
				<view class="imgbox">
					<i class="iconfont icon-fangkeguanli"></i>
				</view>
				<text>来访登记</text>
			</view>
			<view class="navitem" v-for="(item,index) in navList" :key="index" @click="navFunction(item)"
				v-if="item.type =='' || usertype == item.type">
				<view class="imgbox">
					<i class="iconfont" :class="item.icon"></i>
				</view>
				<text>{{item.text}}</text>
			</view>
			<view class="navitem" @click="toPage('/pages/house/release')" v-if="usertype == 2">
				<view class="imgbox nobg">
					<image src="/static/img/cz.png" mode="widthFix"></image>
				</view>
				<text>房屋出租</text>
			</view>
			<view class="navitem" @click="toPage('/pages/police/index')">
				<view class="imgbox">
					<image src="/static/img/fz.png" mode="widthFix"></image>
				</view>
				<text>反恐反诈</text>
			</view>

		</view>
		<!-- <view class="serve">
			<view class="left">
				<view class="info">
					<view class="title">
						搬家服务
					</view>
					<view class="tips">
						高标准服务体系
					</view>
				</view>
				<view class="bot">
					<image src="/static/img/bj.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="right">
				<view class="ritem">
					<view class="info">
						<view class="title">
							维修服务
						</view>
						<view class="tips">
							检查、诊断、修复
						</view>
					</view>
					<view class="bot">
						<image src="/static/img/wxiu.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="ritem">
					<view class="info">
						<view class="title">
							找管家
						</view>
						<view class="tips">
							全方位管理服务
						</view>
					</view>
					<view class="bot">
						<image src="/static/img/gj.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view> 
		<view class="adbox">
			<image src="/static/img/ts.png" mode="widthFix"></image>
		</view> -->
		<view class="recommend">
			<view class="title" @click="toPage('/pages/room/list')">
				好房推荐
				<uni-icons type="right" color="#c4c4c4"></uni-icons>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index"
					@click="toPage(`/pages/house/tdetail?roomId=1`)">
					<view class="imgbox">
						<image src="/static/img/home.png" mode=""></image>
					</view>
					<view class="infobox">
						<view class="name">
							保利花园小区一居室
						</view>
						<view class="sizebox">
							<view class="size">
								25㎡
							</view>
							<view class="long">
								距离公交站150米
							</view>
						</view>
						<view class="pricebox">
							<text class="tips">限时特惠</text>
							<view class="num">
								￥<text>800</text> /月
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		personalAlert,
		unLock,
		bannerlist,
		getTenantDetail,
		getTenantIsShow
	} from "@/api/api.js"
	export default {
		data() {
			return {
				show_form: false,
				value: 0,
				range: [{
						value: 0,
						text: "广州"
					},
					{
						value: 1,
						text: "深圳"
					},
					{
						value: 2,
						text: "佛山"
					},
				],
				search: '',
				navList: [

					{
						text: '我的房间',
						icon: 'icon-weixiuzhong',
						url: '/pages/room/mylist',
						type: 2
					},
					// {
					// 	text: '来访登记',
					// 	icon: 'icon-fangkeguanli',
					// 	url: '/pages/visit/index',
					// 	type: ''
					// },

					{
						text: '房东申请',
						icon: 'icon-cangkuguanli',
						url: '/pages/userinfo/insetLandlord?type=landlord',
						type: 1
					},
					{
						text: '添加房屋',
						icon: 'icon-weixiuzhong',
						url: '/pages/landlord/addhouse',
						type: 2
					},
					{
						text: '租户信息',
						icon: 'icon-cangkuguanli',
						url: '/pages/admin/tenantlist',
						type: 3
					},
					// {
					// 	text: '报警信息',
					// 	icon: 'icon-fangkeguanli',
					// 	url: '',
					// 	type: 3
					// },
					{
						text: '审核房东',
						icon: 'icon-cangkuguanli',
						url: '/pages/admin/ownerlist',
						type: 3
					},
					{
						text: '管理房屋',
						icon: 'icon-weixiuzhong',
						url: '/pages/admin/houselist',
						type: 3
					},
					{
						text: '门禁登记',
						icon: 'icon-yonghutongji',
						url: '/pages/admin/uploadFace',
						type: 2
					},
					{
						text: '民意调查',
						icon: 'icon-guketiaochawenjuanbiao',
						url: '',
						type: ''
					},
					{
						text: '在线留言',
						icon: 'icon-liuyan',
						url: '',
						type: ''
					},
				],
				list: [],
				info: []
			}
		},
		props: ['usertype'],
		created() {
			this.bannerlist()
			this.getTenantDetail()
			this.getTenantIsShow()
		},
		methods: {
			getTenantIsShow() {
				getTenantIsShow().then(res => {
					this.show_form = res.data
				})
			},
			getTenantDetail() {
				let usertype = uni.getStorageSync('usertype')
				if (usertype != 1) return
				getTenantDetail().then(res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
			},
			scanCode() {
				uni.scanCode({
					success(res) {
						uni.navigateTo({
							url: res.result
						})
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			bannerlist() {
				bannerlist().then(res => {
					if (res.code == 200) this.list = res.data
				})
			},
			personalAlert() {
				var that = this
				uni.getLocation({
					success(e) {
						personalAlert({
							lat: e.latitude,
							lng: e.longitude
						}).then(res => {
							uni.$showMsg(res.msg)
							if (res.code == 200) {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/tenant/policelist'
									})
								}, 800)
							}
						})
					},
					fail(err) {
						uni.$showMsg('获取定位失败')
					}
				})

			},
			navFunction(item) {
				if (uni.getStorageSync('token') == '') {
					uni.redirectTo({
						url: '/pages/login/index'
					})
					return
				}
				if (item.url == '') {
					uni.$showMsg('暂未开放')
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: linear-gradient(to bottom, #ff94664d, transparent 35%) no-repeat;
	}

	.swiper {
		padding: 0 10px;
		margin-top: 10px;

		swiper {
			width: 100%;
			height: 150px;

			.swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 5px;
				}
			}


		}
	}


	.search {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 20px;
		width: 96%;
		margin: 10px auto;
		padding: 5px 15px;
		box-sizing: border-box;

		uni-select {
			border: 0;
		}

		.left {
			width: 80px;
			border-right: 1px solid #f2f2f2;
			padding-right: 10px;
		}

		.inputbox {
			width: calc(100% - 90px);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 10px;
			box-sizing: border-box;

			i {
				color: #ff9466;
				font-size: 22px;
			}

			input {
				font-size: 14px;
				flex: 1;
			}
		}
	}

	.nav {
		display: flex;
		padding: 10px 2%;
		flex-wrap: wrap;

		.navitem {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			margin-bottom: 10px;

			.imgbox {
				width: 45px;
				height: 45px;
				background: linear-gradient(to bottom, rgba(250, 144, 140, 1), rgba(255, 87, 51, 1));
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				margin-bottom: 4px;
				position: relative;

				&.nobg {
					background: transparent !important;
				}

				i {
					font-size: 19px;
				}

				.it {
					position: absolute;
					top: 0;
					right: -8px;
					font-size: 12px;
					background: #f00;
					color: #fff;
					border-radius: 4px;
					padding: 0 4px;
					transform: scale(.8);
				}

				image {
					border-radius: 50%;
				}
			}

			&:nth-child(2) {
				.imgbox {
					background: linear-gradient(to top, rgba(255, 188, 57, 1), rgba(255, 180, 66, 1));
				}
			}

			&:nth-child(3) {
				.imgbox {
					background: linear-gradient(to top, rgba(249, 128, 78, 1), rgba(251, 168, 123, 1));
				}
			}

			&:nth-child(4) {
				.imgbox {
					background: linear-gradient(to bottom, rgba(74, 207, 118, 1), rgba(134, 230, 168, 1));
				}
			}

			&:nth-child(7) {
				.imgbox {
					background: linear-gradient(to top, rgba(255, 188, 57, 1), rgba(255, 180, 66, 1));
				}
			}

			&:nth-child(8) {
				.imgbox {
					background: linear-gradient(to top, rgba(249, 128, 78, 1), rgba(251, 168, 123, 1));
				}
			}

			&:nth-child(9) {
				.imgbox {
					background: linear-gradient(to bottom, rgba(74, 207, 118, 1), rgba(134, 230, 168, 1));
				}
			}

			&:nth-child(10) {
				.imgbox {
					background: linear-gradient(to top, rgba(255, 188, 57, 1), rgba(255, 180, 66, 1));
				}
			}

			&:nth-child(11) {
				.imgbox {
					background: linear-gradient(to top, rgba(249, 128, 78, 1), rgba(251, 168, 123, 1));
				}
			}

			&:nth-child(12) {
				.imgbox {
					background: linear-gradient(to bottom, rgba(74, 207, 118, 1), rgba(134, 230, 168, 1));
				}
			}

		}

	}

	.serve {
		display: flex;
		justify-content: space-between;
		padding: 0 2%;
		margin-top: 10px;

		.left {
			background: rgba(93, 173, 254, 0.1);
			width: 42%;
			border-radius: 5px;
			padding: 15px;
			box-sizing: border-box;
			height: 170px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 17px;
				font-weight: bold;
				background: linear-gradient(to bottom, rgba(130, 180, 255, 1), rgba(32, 110, 255, 1));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}


			image {
				width: 80px;
			}

			.bot {
				text-align: right;
			}
		}

		.right {
			width: 56%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.ritem {
				background: rgba(78, 81, 255, 0.1);
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80px;
				border-radius: 5px;
				padding: 0 10px;
				box-sizing: border-box;

				image {
					width: 50px;
				}

				.title {
					font-weight: bold;
					font-size: 17px;
					background: linear-gradient(to right, rgba(78, 81, 255, 1), rgba(132, 158, 243, 1));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}


				&:nth-child(2) {
					background: rgba(50, 130, 234, 0.1);

					.title {
						background: linear-gradient(to right, rgba(42, 85, 179, 1), rgba(28, 52, 97, 1));
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					image {
						width: 60px;
					}
				}
			}
		}

		.tips {
			font-size: 14px;
			color: #a6a6a6;
			margin-top: 5px;
		}
	}

	.adbox {
		padding: 0 2%;
		margin-top: 20px;

		image {
			width: 100%;
		}
	}

	.recommend {
		padding: 0 2%;

		.title {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 17px;
			margin: 10px 0;

			text {
				margin-left: 5px;
			}
		}

		.list {
			.item {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				background: rgba(249, 250, 253, 1);
				padding: 10px 5px;

				.imgbox {
					width: 35%;
					height: 90px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.infobox {
					width: 65%;
					padding-left: 10px;
					box-sizing: border-box;

					.name {
						font-weight: bold;
						font-size: 17px;
					}

					.sizebox {
						display: flex;
						align-items: center;
						font-size: 13px;
						color: #ADADAD;
						margin-top: 10px;

						.size {
							padding-right: 10px;
							border-right: 1px solid #ADADAD;
							margin-right: 8px;
						}
					}

					.pricebox {
						display: flex;
						align-items: center;
						margin-top: 10px;
						color: #FC7941;

						.tips {
							background: #FC7941;
							color: #fff;
							font-size: 13px;
							padding: 4px 8px;
							border-radius: 5px;
							margin-right: 8px;
						}

						.num {
							font-size: 14px;

							text {
								font-size: 18px;
								font-weight: bold;
								margin-right: 2px;
							}
						}
					}
				}
			}
		}
	}
</style>